<template>
    <view>
        <!-- <view class="uni-header">
			<view class="uni-group">
				<view class="uni-title"></view>
				<view class="uni-sub-title"></view>
			</view>
			<view class="uni-group">
				<input class="uni-search" type="text" v-model="query" placeholder="请输入搜索内容" />
				<button class="uni-button" type="default" size="mini" @click="search">搜索</button>
			</view>
		</view> -->

		<view style="padding-top: 30px;padding-left: 30px;">
			<!-- <download-excel :data="json_data" name="excel.xls" type="csv">
			    <button class="uni-button uni-button-full" type="primary" style="width: 100px;">导出exel</button>
			</download-excel> -->
            <button class="uni-button uni-button-full" type="primary" style="width: 120px;"
                @click="daochu">导出excel</button>
			<text style="font-size:30rpx;line-height:40px;color: #666666;">操作提示：同意仅代表同意提现，暂未打款；已打款表示打款完成；微信自动提现可忽略同意，直接点击已打款</text>
		</view>
		
        
        <view class="uni-container">
            <unicloud-db
                ref="udb"
                collection="withdrawrecord_log,userinfo"
                :options="options"
                where=""
                field="_id,commission,createtime,count,balance,status,type,msg,uid{nickname,avatar,realname,zhifubao}"
                page-data="replace"
                :orderby="orderby"
                :getcount="true"
                :page-size="options.pageSize"
                :page-current="options.pageCurrent"
                v-slot:default="{ data, pagination, loading, error }"
            >
                <uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe>
                    <uni-tr>
                        <uni-th align="center">ID</uni-th>
                        <uni-th align="center">昵称</uni-th>
						<uni-th align="center">真实姓名</uni-th>
                        <uni-th align="center">头像</uni-th>
                        <uni-th align="center">提现金额</uni-th>
                        <uni-th align="center">手续费</uni-th>
                        <uni-th align="center">剩余可提现</uni-th>
                        <uni-th align="center">提现方式</uni-th>
						<uni-th align="center">支付宝账号</uni-th>
                        <uni-th align="center">拒绝理由</uni-th>
                        <uni-th align="center">时间</uni-th>
                        <uni-th align="center">操作</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in data" :key="index">
                        <uni-td align="center">{{ item._id }}</uni-td>
                        <uni-td align="center">{{ item.uid[0]['nickname'] }}</uni-td>
						<uni-td align="center">{{ item.uid[0]['realname'] }}</uni-td>
                        <uni-td align="center"><image :src="item.uid[0]['avatar']" mode="" style="width: 80rpx;height: 80rpx;"></image></uni-td>
                        <uni-td align="center">{{ Math.floor(parseFloat(item.count) * 100) / 100 }}</uni-td>
                        <uni-td align="center">{{ item.commission }}</uni-td>
                        <uni-td align="center">{{ Math.floor(parseFloat(item.balance) * 100) / 100 }}</uni-td>
                        <uni-td align="center">{{ item.type == 'zhifubao' ? '支付宝' : '微信' }}</uni-td>
						<uni-td align="center">{{ item.uid[0]['zhifubao'] }}</uni-td>
                        <uni-td align="center">{{ item.msg }}</uni-td>
                        <uni-td align="center"><uni-dateformat :date="item.createtime * 1000" :threshold="[0, 0]" /></uni-td>
                        <uni-td align="center" v-if="item.status == 1 || item.status == 2">{{ item.status == 1 ? '已同意' : '已拒绝' }}</uni-td>
                        <uni-td align="center" v-else>
                            <view class="uni-group">
                                <button @click="tongyi(item, 1)" class="uni-button" size="mini" type="warn" v-if="item.status == 0 || item.status == 3">已打款</button>
                                <button @click="tongyi(item, 3)" class="uni-button" size="mini" type="warn" v-if="item.status == 0">同意</button>
                                <button @click="jujue(item)" class="uni-button" size="mini" type="warn" v-if="item.status == 0 || item.status == 3">拒绝</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
                <view class="uni-pagination-box">
                    <uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count" @change="onPageChanged" />
                </view>
            </unicloud-db>
        </view>

        <uni-popup ref="Popup" type="center">
            <view class="modal" style="width:450px; padding: 20px;">
                <view class="uni-container">
                    <uni-forms ref="form" validateTrigger="bind">
                        <uni-forms-item label="拒绝理由" name="title" labelWidth="100">
                            <input class="uni-input-border" type="text" placeholder="拒绝理由" v-model="item.msg" />
                        </uni-forms-item>
                        <view class="uni-button-group pointer">
                            <button class="uni-button uni-button-full" type="primary" :disabled="isLoading" @click="save">确定拒绝</button>
                        </view>
                    </uni-forms>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
const db = uniCloud.database();
// 表查询配置
const dbOrderBy = 'createtime desc'; // 排序字段
const dbSearchFields = ['uid']; // 支持模糊搜索的字段列表
// 分页配置
const pageSize = 10;
const pageCurrent = 1;

import { mapState } from 'vuex';
export default {
    data() {
        return {
            query: '',
            where: '',
            orderby: dbOrderBy,
            options: {
                pageSize,
                pageCurrent
            },
            item: {},
            isLoading: false,
            json_data: [
                
            ]
        };
    },
    computed: {
        ...mapState('user', ['userInfo'])
    },
    methods: {
        formatJson(filterVal, jsonData) {
            return jsonData.map((v, index) => filterVal.map(j => {
                return v[j]
            }))
        },
        daochu() {
            var self = this
            var data = this.$refs.udb.dataList
            var arr = []
            for (var i = 0; i < data.length; i++) {
                var item = data[i]
                if (item.status == 3) {
                    var json = {}
                    json['index'] = arr.length + 1
                    json['zhifubao'] = item['uid'][0]['zhifubao']
                    json['realname'] = item['uid'][0]['realname']
                    json['amount'] = Math.floor(parseFloat(item.count) * 100) / 100
                    json['id'] = item['_id']
                    arr.push(json)
                }
            }
            console.log(arr)
            import('./Export2Excel').then(excel => {
                const tHeader = ['序号', '收款方支付宝账号', '收款方姓名', '金额', '备注']
                const filterVal = ['index', 'zhifubao', 'realname', 'amount', 'id']
                const data = this.formatJson(filterVal, arr)
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: "提现列表",
                    autoWidth: this.autoWidth,
                    bookType: 'xls'
                })
            })
        },
        getWhere() {
            const query = this.query.trim();
            if (!query) {
                return '';
            }
            const queryRe = new RegExp(query, 'i');
            return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
        },
        search() {
            const newWhere = this.getWhere();
            const isSameWhere = newWhere === this.where;
            this.where = newWhere;
            if (isSameWhere) {
                // 相同条件时，手动强制刷新
                this.loadData();
            }
        },
        loadData(clear = true) {
            this.$refs.udb.loadData({
                clear
            });
        },
        onPageChanged(e) {
            this.$refs.udb.loadData({
                current: e.current
            });
        },
        tongyi(item, type) {
            this.$request('admin/tixian', { id: item._id, type: type })
                .then(res => {
                    this.loadData();
                })
                .catch(err => {});
        },
        jujue(item) {
            this.item = item;
            this.$refs.Popup.open();
        },
        save() {
            var self = this;
            self.isLoading = true;

            this.$request('admin/tixian', { id: this.item._id, type: 2, msg: this.item.msg })
                .then(res => {
                    self.isLoading = false;
                    self.$refs.Popup.close();
                    self.loadData();
                })
                .catch(err => {});
        }
    }
};
</script>
<style>
.modal {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background-color: #ffffff;
}

.modal-content {
    padding: 15px;
    height: 500px;
    box-sizing: border-box;
}
</style>
